body{height:100%;width:100%;margin:0;padding:0;font: "\5B8B\4F53","Microsoft Yahei",Arial, Helvetica,sans-serif;font-family: "Microsoft Yahei";}
ol, ul ,li{list-style: none;margin: 0;padding: 0;} 
img {border:0; }
input{-webkit-appearance: none; -moz-appearance: none;-o-appearance: none; appearance: none;appearance: none; }
.float-l{float:left}
.float-r{float:right}
/*first page*/
.fs{
	width:100%;
	position: absolute;
	height:100%;
	display: none;	
}
.fs-bg1{
	background: url(../img/bg.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}
.fs-bed{
	width:88%;
	position: absolute;
	top:25%;
	left:0%;
}
.fs-bed img{
	width:100%;
}
.fs-page{
	width:12%;
	position: absolute;
	top:54%;
	right:5.5%
}
.fs-page img{
	width:100%;
}
.fs-clock{
	width:18%;
	position: absolute;
	top:-37%;
	right:10%;
	transform:scale(0.35,0.35);
    -webkit-transform:scale(0.35,0.35);
    -webkit-animation: clock 300ms linear forwards;
    animation: clock 300ms linear forwards;
}
@keyframes clock{
	from{top:-37%;}
	to{top:7%;}
}
@-webkit-keyframes clock{
	from{top:-37%;}
	to{top:7%;}
}
.fs-word{
	position: absolute;
	width:65%;
	top:6%;
	left:10%;
	opacity: 0;
	-webkit-animation: wordin 5000ms linear 500ms forwards;
    animation: wordin 5000ms linear 500ms forwards;
}
.fs-word img{
	width:100%
}
@keyframes wordin{
	from{opacity: 0}
	to{opacity: 1}
}
@-webkit-keyframes wordin{
	from{opacity: 0}
	to{opacity: 1}
}
.fs-man{
	position: absolute;
	width:40%;
	top:20%;
	left:40%;
	display: none;
	-webkit-animation: man 100ms linear  forwards;
    animation: man 100ms linear forwards;
}
.fs-man img{
	width:100%;
}
@keyframes man{
	from{left:40%;}
	to{left:100%;}
}
@-webkit-keyframes man{
	from{left:40%;}
	to{left:100%;}
}
.fs-lp{
	position: absolute;
	width:13%;
	top:47%;
	left:48%;
	display: none;
	-webkit-animation: lp 100ms linear  forwards;
    animation: lp 100ms linear  forwards;
}
.fs-lp img{
	width:100%;
}
@keyframes lp{
	from{left:48%;}
	to{left:100%;}
}
@-webkit-keyframes lp{
	from{left:48%;}
	to{left:100%;}
}
.fs-yan{
	position: absolute;
	width:38%;
	top:23%;
	left:10%;
	display: none;
	-webkit-animation: yan 1000ms linear  forwards;
    animation: yan 1000ms linear  forwards;
}
.fs-yan img{
	width:100%;
}
@keyframes yan{
	from{left:10%;opacity: 1;}
	to{left:5%;opacity: 0;}
}
@-webkit-keyframes yan{
	from{left:10%;opacity: 1;}
	to{left:5%;opacity: 0;}
}
.fs-line{
	position: absolute;
	width:50%;
	top:44%;
	left:39%;
	display: none;
	-webkit-animation: line 1000ms linear forwards;
    animation: line 1000ms linear forwards;
}
.fs-line img{
	width:100%;
}
@keyframes line{
	from{opacity: 1;}
	to{opacity: 0;}
}
@-webkit-keyframes line{
	from{opacity: 1;}
	to{opacity: 0;}
}
.fs-black{
	width:100%;
	height:100%;
	position: absolute;
	background: #000;
	opacity: 0;
	display: none;
	-webkit-animation: black 1000ms linear forwards;
    animation: black 1000ms linear forwards;
}
@keyframes black{
	from{opacity: 0;}
	to{opacity: 0.9;}
}
@-webkit-keyframes black{
	from{opacity: 0;}
	to{opacity: 0.9;}
}

/*second page*/
.sc{
	width:100%;
	position: absolute;
	height:100%;
	display: none;
	z-index: 10;
}
.sc-one{
	width:100%;
	position: absolute;
	height:100%;
	z-index: 8;
	background: url(../img/sc-bg1.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	opacity: 1;
}
.sc-two{
	width:100%;
	position: absolute;
	height:100%;
	z-index: 6;
	background: url(../img/sc-bg2.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	opacity: 0;
}
.sc-time{
	width:60%;
	position: absolute;
	left: -60%;
	top:10%;
	z-index: 9;
	opacity: 0;
	-webkit-animation: sctime 1000ms linear forwards;
    animation: sctime 1000ms linear forwards;
}
.sc-time img{
	width:100%;
	-webkit-animation: dd 100ms 4 linear 1000ms ;
    animation: dd 100ms 4 linear 1000ms ;
}
@keyframes sctime{
	from{opacity: 0;}
	to{opacity: 1;}
}
@-webkit-keyframes sctime{
	from{opacity: 0;}
	to{opacity: 1;}
}
@keyframes dd{
	0%{transform: rotate(0deg);-webkit-transform:rotate(0deg) ;}
	50%{transform: rotate(10deg);-webkit-transform:rotate(10deg) ;}
	100%{transform: rotate(-10deg);-webkit-transform:rotate(-10deg) ;}
}
@-webkit-keyframes dd{
	0%{transform: rotate(0deg);-webkit-transform:rotate(0deg);}
	50%{transform: rotate(10deg);-webkit-transform:rotate(10deg);}
	100%{transform: rotate(-10deg);-webkit-transform:rotate(-10deg);}
}
.sc-black{
	width:100%;
	height:100%;
	position: absolute;
	background: #000;
	opacity: 0;
	display: none;
	-webkit-animation: black 1000ms linear forwards;
    animation: black 1000ms linear forwards;
    z-index: 99;
}
/*three page*/
.tr{
	width:100%;
	position: absolute;
	height:100%;
	background: url(../img/p3-bg.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	overflow: hidden;
	display: none;
}
.tr-yun{
	width:200%;
	position: absolute;
	top:12%;
	left: 18%;
	-webkit-animation:yun 5s linear forwards;
	animation:yun 5s linear forwards;
}
.tr-yun img{
	width:48%;
	margin-right: 2%;
}
@-webkit-keyframes yun{
	from{left: 18%;}
	to{left: 0%;}
}
@keyframes yun{
	from{left: 18%;}
	to{left: 0%;}
}
.tr-bird{
	width:15%;
	position: absolute;
	top:18%;
	left: 10%;
	-webkit-animation:bird 5s linear forwards;
	animation:bird 5s linear forwards;
	z-index:30;
}
.tr-bird img{
	width:100%;
}
@-webkit-keyframes bird{
	from{left: 10%;}
	to{left: 100%;}
}
@keyframes bird{
	from{left: 10%;}
	to{left: 100%;}
}
.tr-c2{
	width:200%;
	position: absolute;
	top:20%;
	-webkit-animation:city2 5s linear forwards ;
	animation:city2 5s linear forwards;
}
.tr-c2 img{
	width:100%;
}
@-webkit-keyframes city2{
	from{left: 0%;}
	to{left: -20%;}
}
@keyframes city2{
	from{left: 0%;}
	to{left: -20%;}
}
.tr-c1{
	width:300%;
	position:absolute;
	top:42.5%;
	-webkit-animation:city1 5s linear forwards;
	animation:city1 5s linear forwards;
}
.tr-c1 img{
	width:33.3%;
}
@-webkit-keyframes city1{
	from{left: 0%;}
	to{left: -40%;}
}
@keyframes city1{
	from{left: 0%;}
	to{left: -40%;}
}
.tr-line{
	width:100%;
	position:absolute;
	top:78%;
}
.tr-line img{
	width:200%;
	position:absolute;
	top:0;
	left: 0;
	-webkit-animation:paodao2 5s linear forwards;
	animation:paodao2 5s linear forwards;
}
@-webkit-keyframes paodao2{
	from{left: 0%;}
	to{left: -100%;}
}
@keyframes paodao2{
	from{left: 0%;}
	to{left: -100%;}
}
.tr-rw{
	width:100%;
	position:absolute;
	top:92%;
	height:100%;
}
.tr-rw>div{
	position: absolute;
}
.tr-yy{
	width:45%;
	left: 30%;
	top:0;
}
.tr-yy img{
	width:100%;
}
.tr-car{
	width:52%;
	left: 26%;
	top:-28%;
}
.tr-car img{
	width:100%;
}
.tr-car-stop{
	top:-28.2%;
	transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg);
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
}
.tr-lt1{
	width:15%;
	left: 29%;
	top:-8%;
	
}
.tr-lt1 img{
	width:100%;
	-webkit-animation:luntai 10ms 500 linear forwards;
	animation:luntai 10ms 500 linear forwards;
}
.tr-lt2{
	width:15%;
	left: 64%;
	top:-8%;
	
}
.tr-lt2 img{
	width:100%;
	-webkit-animation:luntai 10ms 500 linear forwards;
	animation:luntai 10ms 500 linear forwards;
}
.tr-lt2-stop{
	top:-8.2%;
}
@-webkit-keyframes luntai{
	0%{
		-webkit-transform:rotate(0deg);
	}
	100%{
		-webkit-transform:rotate(360deg);
	}
}
keyframes luntai{
	0%{
		-webkit-transform:rotate(0deg);
	}
	100%{
		-webkit-transform:rotate(360deg);
	}
}
.tr-jz{
	width:1.5%;
	left: 56%;
	top:-3%;
	transform: rotate(60deg);
	transform-origin:0% 0%;
	-webkit-transform: rotate(60deg);
	-webkit-transform-origin:0% 0%;
	-webkit-animation:jz 500ms linear 5s forwards;
	animation:jz 500ms linear 5s forwards;
}
.tr-jz img{
	width:100%;
}
@-webkit-keyframes jz{
	0%{
		transform: rotate(60deg);
		-webkit-transform: rotate(60deg);		
	}
	100%{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);		
	}
}
keyframes jz{
	0%{
		transform: rotate(60deg);
		-webkit-transform: rotate(60deg);		
	}
	100%{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);		
	}
}
.tr-ren{
	width:30%;
	left: 30%;
	top:-38%;
}
.tr-ren img{
	width:100%;
}
.tr-hand{
	width:10%;
	left: 48%;
	top:-17.2%;
	transform-origin:0% 30%;
	-webkit-transform-origin:0% 30%;
	-webkit-animation:hand 500ms linear 6s forwards;
	animation:hand 500ms linear 6s forwards;
}
.tr-hand img{
	width:100%;
}
@-webkit-keyframes hand{
	0%{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);		
	}
	100%{
		transform: rotate(65deg);
		-webkit-transform: rotate(65deg);		
	}
}
keyframes hand{
	0%{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);		
	}
	100%{
		transform: rotate(65deg);
		-webkit-transform: rotate(65deg);		
	}
}
.tr-dian1{
	width:7%;
	left: 40%;
	top:-15.8%;
	opacity: 1;
	display: none;
	-webkit-animation:dian1 1500ms infinite linear ;
	animation:dian1 1500ms infinite linear ;
}
.tr-dian1 img{
	width:100%;
}
@-webkit-keyframes dian1{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}
@keyframes dian1{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}
.tr-dian2{
	width:7%;
	left: 41%;
	top:-18.8%;
	display: none;
	transform: rotate(30deg);
	-webkit-transform:rotate(30deg) ;
	opacity: 0;
	-webkit-animation:dian2 1500ms infinite linear ;
	animation:dian2 1500ms infinite linear ;
}
.tr-dian2 img{
	width:100%;
}
@-webkit-keyframes dian2{
	0%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes dian2{
	0%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}
.tr-ling{
	width:20%;
	left: 5%;
	top:-17.8%;	
	display: none;
}
.tr-ling img{
	width:20%;
	position: absolute;
}
.tr-ling img:first-child{
	top:9px;
	margin-left: 52px;
	opacity: 1;
	animation: yf1 1s infinite linear;
    -webkit-animation: yf1 1s infinite linear;
}
@keyframes yf1{
	0%{opacity: 1;top:3px}
	25%{opacity: 0.75;top:9px}
	50%{opacity: 0.5;top:3px}
	75%{opacity: 0.25;top:-3px}
	100%{opacity: 0;top:3px}
}
@-webkit-keyframes yf1{
	0%{opacity: 1;top:3px}
	25%{opacity: 0.75;top:9px}
	50%{opacity: 0.5;top:3px}
	75%{opacity: 0.25;top:-3px}
	100%{opacity: 0;top:3px}
}
.tr-ling img:nth-child(2){
	top:-2px;
	margin-left: 72px;
	opacity: 1;
	animation: yf2 1s infinite linear;
    -webkit-animation: yf2 1s infinite linear;
}
@keyframes yf2{
	0%{opacity: 0.75;top:-3px}
	25%{opacity: 0.5;top:3px}
	50%{opacity: 0.25;top:9px}
	75%{opacity: 0;top:3px}
	100%{opacity: 1;top:-3px}
}
@-webkit-keyframes yf2{
	0%{opacity: 0.75;top:-3px}
	25%{opacity: 0.5;top:3px}
	50%{opacity: 0.25;top:9px}
	75%{opacity: 0;top:3px}
	100%{opacity: 1;top:-3px}
}
.tr-ling img:nth-child(3){
	top:8px;
	margin-left: 86px;
	animation: yf3 1s infinite linear;
    -webkit-animation:yf3 1s  infinite linear;
}
@keyframes yf3{
	0%{opacity: 0.5;top:9px}
	25%{opacity: 0.25;top:3px}
	50%{opacity: 0;top:-3px}
	75%{opacity: 1;top:3px}
	100%{opacity: 0.75;top:9px}
}
@-webkit-keyframes yf3{
	0%{opacity: 0.5;top:9px}
	25%{opacity: 0.25;top:6px}
	50%{opacity: 0;top:-3px}
	75%{opacity: 1;top:3px}
	100%{opacity: 0.75;top:9px}
}
.tr-ling img:nth-child(4){
	top:0px;
	margin-left: 106px;
	animation: yf4 1s infinite linear;
    -webkit-animation:yf4 1s infinite linear;
}
@keyframes yf4{
	0%{opacity: 0.25;top:3px}
	25%{opacity: 0;top:-3px}
	50%{opacity: 1;top:3px}
	75%{opacity: 0.75;top:9px}
	100%{opacity: 0.5;top:3px}
}
@-webkit-keyframes yf4{
	0%{opacity: 0.25;top:3px}
	25%{opacity: 0;top:-3px}
	50%{opacity: 1;top:3px}
	75%{opacity: 0.75;top:9px}
	100%{opacity: 0.5;top:3px}
}
.tr-yan{
	width:15%;
	left: 10%;
	top:-10.8%;
	opacity: 1;
	-webkit-animation:tryan 1000ms infinite linear;
	animation:tryan 1000ms infinite linear ;
}
.tr-yan img{
	width:100%;
}
@-webkit-keyframes tryan{
	0%{
		left:10%;
		opacity: 1;
	}
	100%{
		left:2%;
		opacity: 0;
	}
}
keyframes tryan{
	0%{
	    left:10%;
	    opacity: 1;
	}
	100%{
		left:2%;
		opacity: 0;
	}
}
.tr-black{
	width:100%;
	height:100%;
	position: absolute;
	background: #000;
	opacity: 0;
	display: none;
	-webkit-animation: black 1000ms linear forwards;
    animation: black 1000ms linear forwards;
    z-index: 99;
}
/*four page*/
.for{
	width:100%;
	position: absolute;
	height:100%;
	z-index: 15;
	background: #546e7a;
	display: none;
}
.for-black{
	width:100%;
	height:100%;
	position: absolute;
	background: #000;
	opacity: 0;
	display: none;
	-webkit-animation: black 1000ms linear forwards;
    animation: black 1000ms linear forwards;
    z-index: 999;
}
.for-hand{
	width:100%;
	position: absolute;
	height:100%;
	background: url(../img/for-bg.png) center no-repeat;
	background-size:100% 100%;
	/*top:100%;
	-webkit-animation:handup 2000ms linear forwards;
	animation:handup 2000ms linear forwards;*/
}
/*@-webkit-keyframes handup{
	0%{
		top:100%;
	}
	100%{
		top:0%;
	}
}
keyframes handup{
	0%{
		top:100%;
	}
	100%{
		top:0%;
	}
}*/
.for-con{
	width:60%;
	margin:36.5% 20% 17.5% 20%;
	height:55%;
	background: #ebebeb;
	overflow: hidden;
	position: relative;
}
.for-con .box{
	width:100%;
	position: absolute;
	top:0;
	-webkit-animation:yd 10s linear 5s forwards;
	animation:yd 10s linear 5s forwards;
}
@-webkit-keyframes yd{
	0%{
		top:0%;
	}
	2%{
		top:-15%;
	}
	10%{
		top:-15%;
	}
	12%{
		top:-31.5%;
	}
	20%{
		top:-31.5%;
	}
	22%{
		top:-48%;
	}
	30%{
		top:-48%;
	}
	32%{
		top:-64.5%;
	}
	40%{
		top:-64.5%;
	}
	42%{
		top:-81%;
	}
	50%{
		top:-81%;
	}
	52%{
		top:-97.5%;
	}
	60%{
		top:-97.5%;
	}
	62%{
		top:-114%;
	}
	70%{
		top:-114%;
	}
	72%{
		top:-130.5%;
	}
	80%{
		top:-130.5%;
	}
	82%{
		top:-146%;
	}
	90%{
		top:-146%;
	}
	92%{
		top:-162.5%;
	}
	100%{
		top:-162.5%;
	}	
}
keyframes yd{
	0%{
		top:0%;
	}
	2%{
		top:-15%;
	}
	10%{
		top:-15%;
	}
	12%{
		top:-31.5%;
	}
	20%{
		top:-31.5%;
	}
	22%{
		top:-48%;
	}
	30%{
		top:-48%;
	}
	32%{
		top:-64.5%;
	}
	40%{
		top:-64.5%;
	}
	42%{
		top:-81%;
	}
	50%{
		top:-81%;
	}
	52%{
		top:-97.5%;
	}
	60%{
		top:-97.5%;
	}
	62%{
		top:-114%;
	}
	70%{
		top:-114%;
	}
	72%{
		top:-130.5%;
	}
	80%{
		top:-130.5%;
	}
	82%{
		top:-146%;
	}
	90%{
		top:-146%;
	}
	92%{
		top:-162.5%;
	}
	100%{
		top:-162.5%;
	}
}
.for-con .box span{
	display: block;
	float: left;
	margin-top: 6.7%;
	margin-left: 1%;
}
.for-con .box span img{
	width:80%;
}
.for-con .box span:nth-child(1){
	margin-top: 5.5%;
}
.for-con .box span:nth-child(2){
	text-align: right;
	margin-right: 1.5%;
}
.for-con .box span:nth-child(3){
	margin-top: 5%;
}
.for-con .box span:nth-child(n+3){
	opacity: 0;
}
.for-con .box span:nth-child(3){
	-webkit-animation:sw1 10ms linear 1s forwards;
	animation:sw1 10ms linear 1s forwards;
}
@-webkit-keyframes sw1{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
keyframes sw1{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.for-con .box span:nth-child(4){
	-webkit-animation:sw2 10ms linear 2s forwards;
	animation:sw2 10ms linear 2s forwards;
}
@-webkit-keyframes sw2{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
keyframes sw2{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.for-con .box span:nth-child(5){
	-webkit-animation:sw3 10ms linear 3s forwards;
	animation:sw3 10ms linear 3s forwards;
}
@-webkit-keyframes sw3{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
keyframes sw3{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.for-con .box span:nth-child(n+6){
	-webkit-animation:sw4 10ms linear 4s forwards;
	animation:sw4 10ms linear 4s forwards;
}
@-webkit-keyframes sw4{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
keyframes sw4{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

/*five page*/
.fv{
	width:100%;
	position: absolute;
	height:100%;
	z-index: 15;
	overflow: hidden;
	display: none;
}
.fv-six{
	position: absolute;
	width:50%;
	margin-left: 25.1%;
	margin-top: 62%;
	transform: scale(1.8,1.8);
	-webkit-transform: scale(1.8,1.8);
	z-index: 999;
	display: none;
}
.fv-six-pic{
	position: absolute;
	width:95%;
	margin: 2.3% 0% 0 2.7%;
	top: 0;
}
.fv-six-pic img{
	width:100%;
}
.fv-black{
	width:100%;
	height:100%;
	position: absolute;
	background: #000;
	opacity: 0;
	display: none;
	-webkit-animation: black 1000ms linear forwards;
    animation: black 1000ms linear forwards;
    z-index: 18;
}
.fv-tv{
	position: absolute;
	width:50%;
	margin-left: 25%;
	margin-top: 63%;
	-webkit-tap-highlight-color: transparent;
}
.fv-tv img{
	width:100%;
}
.fv-desk{
	position: absolute;
	width:90%;
	text-align: center;
	left: 5%;
	top: 58%;
	-webkit-animation:desk 4000ms linear 2s forwards;
	animation:desk 4000ms linear 2s forwards;
}
@-webkit-keyframes desk{
	0%{
		top: 58%;
	}
	100%{
		top: 62%;
	}
}
keyframes desk{
	0%{
		top: 58%;
	}
	100%{
		top: 62%;
	}
}
.fv-desk img{
	width:100%;
}
.fv-fa{
	position: absolute;
	width:32%;
	text-align: center;
	left: 10%;
	margin-top: 83%;
	-webkit-animation:fa 4000ms linear 2s forwards;
	animation:fa 4000ms linear 2s forwards;
}
.fv-fa img{
	width:100%;
}
@-webkit-keyframes fa{
	0%{
		left: 10%;
	}
	100%{
		left: -22%;
	}
}
keyframes fa{
	0%{
		left: 10%;
	}
	100%{
		left: -22%;
	}
}
.fv-ma{
	position: absolute;
	width:32%;
	text-align: center;
	left: 60%;
	margin-top: 83%;
	-webkit-animation:ma 4000ms linear 2s forwards;
	animation:ma 4000ms linear 2s forwards;
}
.fv-ma img{
	width:100%;
}
@-webkit-keyframes ma{
	0%{
		left: 60%;
	}
	100%{
		left: 90%;
	}
}
keyframes ma{
	0%{
		left: 60%;
	}
	100%{
		left: 90%;
	}
}
.fv-wall{
	position: absolute;
	width:100%;
	height:100%;
}
.fv-wall img{
	width:100%;
}
.fv-k{
	position: absolute;
	width:100%;
	height:100%;
	-webkit-animation:kuang 4000ms linear 2s forwards;
	animation:kuang 4000ms linear 2s forwards;
	transform-origin:50% 50% ;
	-webkit-transform-origin:50% 50% ;
}
.fv-k img{
	width:100%;
	height:100%;
}
@-webkit-keyframes kuang{
	0%{
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
	}
	100%{
		transform: scale(2,2);
		-webkit-transform: scale(2,2);
	}
}
keyframes kuang{
	0%{
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
	}
	100%{
		transform: scale(2,2);
		-webkit-transform: scale(2,2);
	}
}
.room{
	width:100%;
	height:100%;
	-webkit-animation:room 4000ms linear 2s forwards;
	animation:room 4000ms linear 2s forwards;
	transform-origin:50% 40% ;
	-webkit-transform-origin:50% 40% ;
	position: absolute;
}
@-webkit-keyframes room{
	0%{
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
	}
	100%{
		transform: scale(1.8,1.8);
		-webkit-transform: scale(1.8,1.8);
	}
}
keyframes room{
	0%{
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
	}
	100%{
		transform: scale(1.8,1.8);
		-webkit-transform: scale(1.8,1.8);
	}
}
.fv-w1{
	position: absolute;
	width:100%;
	text-align: center;
	top:20%;
	opacity: 0;
}
.fv-w1 img{
	width:40%;
}
.fv-w2{
	position: absolute;
	width:100%;
	text-align: center;
	top:20%;
	opacity: 0;
}
.fv-w2 img{
	width:40%;
}
.fv-door{
	position: absolute;
	width:100%;
	top:12%;
	-webkit-animation:door 1500ms linear forwards;
	animation:door 1500ms linear forwards;
	transform-origin:82% 0 ;
	-webkit-transform-origin:82% 0 ;
}
.fv-door img{
	width:62.5%;
	float: right;
	margin-right: 18.85%;	
}
@-webkit-keyframes door{
	0%{
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
	}
	100%{
		transform: scale(0,1);
		-webkit-transform: scale(0,1);
	}
}
keyframes door{
	0%{
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
	}
	100%{
		transform: scale(0,1);
		-webkit-transform: scale(0,1);
	}
}
.fv-video{
	display: none;
}
.fv-video-fc{
	position: absolute;
    background: rgba(0,0,0,1);
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    display: table;
}
.fv-video-sc{
	display: table-cell;
    vertical-align: middle;   
}
.fv-video-trc{
	width: 100%;
    text-align: center;
    position: relative;
    background: url(../img/film-bg.jpg) no-repeat center;
    background-size:100% 100% ;
    overflow: hidden;
}
.fv-video-trc span{
	width:100%;
	display: block;
}
.fv-video-trc span img{
	width:100%;
}
.fv-video-fvc{
	width:100%;
	position: absolute;
	top:0;
	left: 0;
	background: url(../img/film-bg.jpg) no-repeat center;
    background-size:100% 100% ;
}
.fv-video-fvc img{
	width:100%;
	opacity:0 ;
	position: absolute;
	top:0;
	left: 0;
	display: none;
}
.fv-video-fvc img:first-of-type{
	opacity:1 ;
	display: block ;
}
.fv-video-show{
	display: block !important;
	opacity:0 ;
	-webkit-animation:picshow 1000ms linear forwards;
	animation:picshow 1000ms linear forwards;
}
@-webkit-keyframes picshow{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
keyframes picshow{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
.fv-video-hide{
	opacity:1;
	-webkit-animation:pichide 1000ms linear forwards;
	animation:pichide 1000ms linear forwards;
}
@-webkit-keyframes pichide{
	0%{
		opacity:1 ;
	}
	100%{
		opacity:0 ;
	}
}
keyframes pichide{
	0%{
		opacity:1 ;
	}
	100%{
		opacity:0;
	}
}
.fv-film{
	position: absolute;
	width:95%;
	margin: 2.3% 0% 0 2.7%;
	top: 0;
}
.fv-film img{
	width:100%;
}
.fv-film-btn{
	position: absolute;
	width:20%;
	margin: 18% 0% 0 40%;
	top: 0;
}
.fv-film-btn img{
	width:100%;
}
/*loadimg*/
.loading{
	height:100%;
	width:100%;
	position: absolute;
	background: #000000;
	overflow: hidden;
}
.loading-logo{
	width:60%;
	height:100%;
	position: absolute;
	left:20%;
	top:25%;
	z-index: 99;
}
.loading-logo img{
	width:100%;
}
.loading-bd{
	width:80%;
	height:100%;
	left: 10%;
	background: #000000;
	position: absolute;
	top:70%;
}
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,700);
#container {
  width: 80%;
  margin:0 auto;
}
#container h1 {
  font-family: 'Lato';
  color: white;
  text-transform: uppercase;
  font-size: 1.2em;
  letter-spacing: 1.5px;
  text-align: center;
  width: 100%;
  margin-top: 20px;
  -webkit-animation: fade 2s infinite;
  -moz-animation: fade 2s infinite;
}

.stick{
  width: 17%;
  height: 3px;
  background: white;
  display: inline-block;
  margin-left: -4.5%;
}
.stick:nth-child(1){
	margin-left: 3.5% !important;
}
.stick:nth-child(n) {
  transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -webkit-transform: rotate(30deg);
  /* Safari and Chrome */
  -moz-transform: rotate(30deg);
  -webkit-animation: fall 2s infinite;
  -moz-animation: fall 2s infinite;
}

.stick:nth-child(2n) {
  transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  /* IE 9 */
  -webkit-transform: rotate(-30deg);
  /* Safari and Chrome */
  -moz-transform: rotate(-30deg);
  -webkit-animation: rise 2s infinite;
  -moz-animation: rise 2s infinite;
}

@-webkit-keyframes rise {
  50% {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    /* IE 9 */
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
  }
}
@-moz-keyframes rise {
  50% {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    /* IE 9 */
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
  }
}
@-o-keyframes rise {
  50% {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    /* IE 9 */
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
  }

  @keyframes rise {
    50% {
      transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      /* IE 9 */
      -webkit-transform: rotate(30deg);
      -moz-transform: rotate(30deg);
    }
  }
}
@-webkit-keyframes fall {
  50% {
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    /* IE 9 */
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(30deg);
  }
}
@-moz-keyframes fall {
  50% {
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    /* IE 9 */
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
  }
}
@-o-keyframes fall {
  50% {
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    /* IE 9 */
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(30deg);
  }

  @keyframes fall {
    50% {
      transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
      /* IE 9 */
      -webkit-transform: rotate(-30deg);
      -moz-transform: rotate(30deg);
    }
  }
}
@-webkit-keyframes fade {
  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}
@-moz-keyframes fade {
  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}
@-o-keyframes fade {
  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }

  @keyframes fade {
    50% {
      opacity: 0.5;
    }

    100% {
      opacity: 1;
    }
  }
}
/*six page*/
.sx{
	width:100%;
	position: absolute;
	height:100%;
	z-index: 15;
	overflow: hidden;
	display: none;
}
.sx-bd{
	width:100%;
	position: absolute;
	height:100%;
	background: url(../img/six-bg.jpg) center no-repeat;
	background-size:100% 100% ;
	transform-origin:34.15% 75.4% ;
	-webkit-transform-origin:34.15% 75.4% ;
	
}
.sx-bd-small{
	transform: scale(3.385,3.385);
	-webkit-transform: scale(3.385,3.385);
	-webkit-animation:sxsmall 4000ms linear forwards;
	animation:sxsmall 4000ms linear forwards;
}
@-webkit-keyframes sxsmall{
	0%{
		transform: scale(3.385,3.385);
	    -webkit-transform: scale(3.385,3.385);
	}
	100%{
		transform: scale(1,1);
	    -webkit-transform: scale(1,1);
	}
}
@keyframes sxsmall{
	0%{
		transform: scale(3.385,3.385);
	    -webkit-transform: scale(3.385,3.385);
	}
	100%{
		transform: scale(1,1);
	    -webkit-transform: scale(1,1);
    }
}
.sx-bd-big{
	-webkit-animation:sxbig 4000ms linear forwards;
	animation:sxbig 4000ms linear forwards;
}
@-webkit-keyframes sxbig{
	0%{		
	    transform: scale(1,1);
	    -webkit-transform: scale(1,1);
	}
	100%{
		transform: scale(3.385,3.385);
	    -webkit-transform: scale(3.385,3.385);
	}
}
@keyframes sxbig{
	0%{		
	    transform: scale(1,1);
	    -webkit-transform: scale(1,1);
	}
	100%{
		transform: scale(3.385,3.385);
	    -webkit-transform: scale(3.385,3.385);
	}
}
.sx-man{
	width:60%;
	position: absolute;
	bottom: -1%;
	right: -9%;
	z-index: 3;	
}
.sx-man img{
	width:100%;
}
.sx-man-move{
	-webkit-animation:moveman 4000ms linear forwards;
	animation:moveman 4000ms linear forwards;	
}
@-webkit-keyframes moveman{
	0%{
		right: -9%;
		width:55%;
	}
	100%{
	    right: 0%;
	    width:60%
	}
}
@keyframes moveman{
	0%{
		right: -9%;
		width:55%;
	}
	100%{
	    right: 0%;
	    width:60%
	}
}
.sx-man-leave{
	-webkit-animation:leaveman 4000ms linear forwards;
	animation:leaveman 4000ms linear forwards;	
}
@-webkit-keyframes leaveman{
	0%{
		right: 0%;
		width:60%;
	}
	100%{
	    right: -9%;
	    width:55%
	}
}
@keyframes leaveman{
	0%{
		right: 0%;
		width:60%;
	}
	100%{
	    right: -9%;
	    width:55%
	}
}
.sx-cpt{
	width:80%;
	position: absolute;
	bottom: 13.5%;
	left: 10%;
}
.sx-cpt img{
	width:100%;
}
.sx-word{
	width:26%;
	position: absolute;
	bottom: 23.5%;
	left: 26.5%;
	opacity: 0;
	-webkit-animation:sxword 10ms linear 1s forwards;
	animation:sxword 10ms linear 1s forwards;
}
.sx-word img{
	width:100%
}
@-webkit-keyframes sxword{
	0%{
		opacity: 0;
	}
	100%{
	    opacity: 1;
	}
}
@keyframes sxword{
	0%{
		opacity: 0;
	}
	100%{
	    opacity: 1;
	}
}
.sx-w1{
	width:10%;
	position: absolute;
	bottom: 31.5%;
	left: 34.5%;
	opacity: 0;
	-webkit-animation:sxw1 1000ms linear 2s forwards;
	animation:sxw1 1000ms linear 2s forwards;
}
.sx-w1 img{
	width:100%
}
@-webkit-keyframes sxw1{
	0%{
		opacity: 0;
	}
	100%{
	    opacity: 1;
	}
}
@keyframes sxw1{
	0%{
		opacity: 0;
	}
	100%{
	    opacity: 1;
	}
}
.sx-w2{
	width:10%;
	position: absolute;
	bottom: 30.5%;
	left: 34.5%;
	opacity: 0;
	-webkit-animation:sxw2 1000ms linear 3s forwards;
	animation:sxw2 1000ms linear 3s forwards;
}
.sx-w2 img{
	width:100%
}
@-webkit-keyframes sxw2{
	0%{
		opacity: 0;
	}
	100%{
	    opacity: 1;
	}
}
@keyframes sxw2{
	0%{
		opacity: 0;
	}
	100%{
	    opacity: 1;
	}
}
.sx-ball1{
    width:11%;
    position: absolute;
    top:45%;
    left: 65%;
    z-index: 4;
    display: none;
}
.sx-ball1 img{
	width:100%
}
.sx-ball2{
    width:13%;
    position: absolute;
    top:30%;
    left: 55%;
    z-index: 4;
    display: none;
}
.sx-ball2 img{
	width:100%
}
.sx-ball3{
    width:15%;
    position: absolute;
    top:15%;
    left: 35%;
    z-index: 4;
    display: none;
}
.sx-ball3 img{
	width:100%
}
.sx-m1{
	width:65%;
    position: absolute;
    top:1%;
    left: 1%;
    z-index: 5;
    display: none;
}
.sx-m1 img{
	width:100%;
}
.sx-m2{
	width:67%;
    position: absolute;
    top:16%;
    right: 3%;
    z-index: 5;
    display: none;
}
.sx-m2 img{
	width:100%;
}
.sx-m3{
	width:60%;
    position: absolute;
    top:33%;
    left: 3%;
    z-index: 5;
    display: none;
}
.sx-m3 img{
	width:100%;
}
.sx-m4{
	width:58%;
    position: absolute;
    top:49%;
    right: 3.5%;
    z-index: 5;
    display: none;
}
.sx-m4 img{
	width:100%;
}
.sx-yw1{
	width:93%;
    position: absolute;
    top:2%;
    left: 1%;
    z-index: 5;
    display: none;
}
.sx-yw1 img{
	width:100%;
}
.sx-yw2{
	width:60%;
    position: absolute;
    top:22%;
    left: 2%;
    z-index: 5;
    display: none;
}
.sx-yw2 img{
	width:100%;
}
.sx-yw3{
	width:60%;
    position: absolute;
    top:2%;
    right: 2%;
    z-index: 5;
    display: none;
}
.sx-yw3 img{
	width:100%;
}
.sx-dian1{
	width:5%;
    position: absolute;
    bottom:19%;
    left:31%;
    z-index: 5;
    opacity: 1;
    display: none;
    -webkit-animation:sxdian1 1500ms infinite linear ;
	animation:sxdian1 1500ms infinite linear ;
}
.sx-dian1 img{
	width:100%;
}
@-webkit-keyframes sxdian1{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}
@keyframes sxdian1{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}
.sx-dian2{
	width:5%;
    position: absolute;
    bottom:19%;
    left:34%;
    z-index: 5;
    transform: rotate(70deg);
    -webkit-transform: rotate(70deg);
    opacity: 0;
    display: none;
	-webkit-animation:sxdian2 1500ms infinite linear ;
	animation:sxdian2 1500ms infinite linear ;
}
.sx-dian2 img{
	width:100%;
}
@-webkit-keyframes sxdian2{
	0%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes sxdian2{
	0%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}
.sx-one{
	width:1%;
    position: absolute;
    bottom:18.7%;
    left:35%;
    z-index: 5;
    display: none;
}
.sx-one img{
	width:100%;
}
/*seven*/
.sv{
	width:100%;
	position: absolute;
	height:100%;
	z-index: 16;
	overflow: hidden;
	background:url(../img/sv-bg.jpg) center no-repeat;
	background-size:100% 100% ;
	transform-origin: 40% 90%;
	-webkit-transform-origin: 40% 90%;
	animation: sv 1000ms linear forwards;
	-webkit-animation: sv 1000ms linear forwards;
	transform: scale(0,0);
	-webkit-transform: scale(0,0);
    display: none;
}
@-webkit-keyframes sv{
	from{transform: scale(0,0);
	-webkit-transform: scale(0,0);}
	to{transform: scale(1,1);
	-webkit-transform: scale(1,1);}
}
@keyframes sv{
	from{transform: scale(0,0);
	-webkit-transform: scale(0,0);}
	to{transform: scale(1,1);
	-webkit-transform: scale(1,1);}
}
.sv-w1{
	width:11%;
	position: absolute;
	left:22%;
	top:29.5%;
	opacity: 0;
	animation: svw1 1000ms linear 5s forwards;
	-webkit-animation: svw1 1000ms linear 5s forwards;
}
.sv-w1 img{
	width:100%
}
@-webkit-keyframes svw1{
	from{opacity: 0;top:23.5%;}
	to{opacity: 1;top:29.5%;}
}
@keyframes svw1{
	from{opacity: 0;top:23.5%;}
	to{opacity: 1;top:29.5%;}
}
.sv-w2{
	width:12%;
	position: absolute;
	left:36%;
	top:22.5%;
	opacity: 0;
	animation: svw2 1000ms linear 4s forwards;
	-webkit-animation: svw2 1000ms linear 4s forwards;
}
.sv-w2 img{
	width:100%
}
@-webkit-keyframes svw2{
	from{opacity: 0;top:16.5%;}
	to{opacity: 1;top:22.5%;}
}
@keyframes svw2{
	from{opacity: 0;top:16.5%;}
	to{opacity: 1;top:22.5%;}
}
.sv-w3{
	width:6.5%;
	position: absolute;
	left:50%;
	top:36.5%;
	opacity: 0;
	animation: svw3 1000ms linear 3s forwards;
	-webkit-animation: svw3 1000ms linear 3s forwards;
}
.sv-w3 img{
	width:100%
}
@-webkit-keyframes svw3{
	from{opacity: 0;top:30.5%;}
	to{opacity: 1;top:36.5%;}
}
@keyframes svw3{
	from{opacity: 0;top:30.5%;}
	to{opacity: 1;top:36.5%;}
}
.sv-w4{
	width:6.5%;
	position: absolute;
	left:61%;
	top:29.5%;
	opacity: 0;
	animation: svw4 1000ms linear 2s forwards;
	-webkit-animation: svw4 1000ms linear 2s forwards;
}
.sv-w4 img{
	width:100%
}
@-webkit-keyframes svw4{
	from{opacity: 0;top:23.5%;}
	to{opacity: 1;top:29.5%;}
}
@keyframes svw4{
	from{opacity: 0;top:23.5%;}
	to{opacity: 1;top:29.5%;}
}
.sv-w5{
	width:6.5%;
	position: absolute;
	left:72%;
	top:22.5%;
	opacity: 0;
	animation: svw5 1000ms linear 1s forwards;
	-webkit-animation: svw5 1000ms linear 1s forwards;
}
.sv-w5 img{
	width:100%
}
@-webkit-keyframes svw5{
	from{opacity: 0;top:16.5%;}
	to{opacity: 1;top:22.5%;}
}
@keyframes svw5{
	from{opacity: 0;top:16.5%;}
	to{opacity: 1;top:22.5%;}
}
.sv-yin{
	width:9.5%;
	position: absolute;
	left:37%;
	top:68%;
	animation: svyin 500ms linear 6s forwards;
	-webkit-animation: svyin 500ms linear 6s forwards;
	transform: scale(3,3);
	-webkit-transform: scale(3,3);
	opacity: 0;
}
.sv-yin img{
	width:100%
}
@-webkit-keyframes svyin{
	from{opacity: 0;transform: scale(3,3);-webkit-transform: scale(3,3);}
	to{opacity: 1;transform: scale(1,1);-webkit-transform: scale(1,1);}
}
@keyframes svyin{
	from{opacity: 0;transform: scale(3,3);-webkit-transform: scale(33);}
	to{opacity: 1;transform: scale(1,1);-webkit-transform: scale(1,1);}
}
.sv-man{
	width:23%;
	position: absolute;
	left:58%;
	top:51%;
}
.sv-man img{
	width:100%
}
.sv-fx{
	position: absolute;
	width:30%;
	left:15%;
	bottom:16%;
}
.sv-fx img{
	width:100%;
}
.sv-again{
	position: absolute;
	width:30%;
	left:55%;
	bottom:16%;
}
.sv-again img{
	width:100%;
}
.sv-c{
	width:100%;
	height:100%;
	position: absolute;
	background: rgba(0,0,0,.5);
	z-index: 99;
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	display: none;
}
.sv-c img{
	width:10%;
	margin-right: 89%;
	margin-top: 1%;
}
.close{
	width:10%;
	position: absolute;
	top: 0;
	right: 0;
}
.close img{
	width:100%;
}
#musicControl { position:fixed;left:10px;top:2%;margin-top:0;display:inline-block;z-index:999; padding: 10px 10px;}
#musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background: url(../img/mcbg.png) no-repeat;background-size:100%;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:0 -25px;}
#musicControl a.onx {-webkit-animation: reverseRotataZ 1.2s linear infinite;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}
 @-webkit-keyframes reverseRotataZ{
		        0%{-webkit-transform: rotateZ(0deg);}
		        100%{-webkit-transform: rotateZ(-360deg);}
		    }
		    @-webkit-keyframes rotataZ{
		        0%{-webkit-transform: rotateZ(0deg);}
		        100%{-webkit-transform: rotateZ(360deg);}
		    }
@media only screen and (min-width:320px) {
	.stick{
	  width: 16%;	  
	}
}
@media only screen and (min-width:375px) {
	.stick{
	  width: 17%;	  
	}
}
@media only screen and (min-width:414px) {
	.stick{
	  width: 18%;	  
	}
	@keyframes clock{
		from{top:-37%;}
		to{top:10%;}
	}
	@-webkit-keyframes clock{
		from{top:-37%;}
		to{top:10%;}
	}
	.tr-jz{
		top:-3.5%;
	}
}
		    